<template>
  <Navbar/>
  <div class="container">
    <el-carousel height="calc(100vh - 59px)">
      <el-carousel-item :key="1">
        <div :style="{ backgroundImage: `url(${require(`@/assets/w1.jpg`)})` }"></div>
      </el-carousel-item>
      <el-carousel-item :key="2">
        <div :style="{ backgroundImage: `url(${require(`@/assets/w2.jpg`)})` }"></div>
      </el-carousel-item>
      <el-carousel-item :key="3">
        <div :style="{ backgroundImage: `url(${require(`@/assets/w3.jpg`)})` }"></div>
      </el-carousel-item>
    </el-carousel>

    <div class="center"><i>服务+责任</i></div>
  </div>
</template>

<script setup>
import Navbar from '@/components/Navbar'
</script>


<style scoped lang="scss">
.el-carousel div {
  width: 100%;
  height: 100%;
  background-size: cover;
}
.container {
  position: relative;
}
.center {
  position: absolute;
  left: 50%;
  top: 50%;
  font-size: 60px;
  color: white;
  transform: translate(-50%, -50%);
  height: 100px;
  line-height: 100px;
  text-shadow: 5px 5px 5px black, 0px 0px 2px black; // 没错这里设置了两个 shadow
}

</style>
